<template>
	<view style="font-size: var(--text-14); text-align: center; margin: 10px; display: flex;">
		<view style="flex:1">当前拥有:{{myCoin}}豆</view>
		<view style="width:100px;">
			<u-tag @click="myorder" text="查看订单" mode="light" /> 
		</view>
	</view>
	<uni-grid :column="3" @change="change">
		<uni-grid-item v-for="(item,index) in StoreList" :index="index" :key="index">
			<view>
				<u-image height="170rpx"  mode="aspectFit" class="sentence-img" :src="'https://nx5.abc5g.com'+item.Img"></u-image> 
			</view>
			<view style="width:100%; text-align: center; margin-top: 5px;overflow: hidden;white-space: nowrap; text-overflow: ellipsis; ">
				<text class="text" style="font-size: var(--text-16);">{{item.Title}}</text>
			</view> 
			<view style="width:100%; display: flex;">
				<view style="flex:1; text-align: center;">{{item.UseCoin}}<text style="font-size:var(--text-12); color:#777;">豆</text></view>
				<view style="flex:1; text-align: center;"><text style="font-size:var(--text-12); color:#777;">剩余</text>{{item.Number}}个</view>
			</view>
		</uni-grid-item> 
	</uni-grid>
	
	<u-popup v-model="canbuy" mode="bottom" height="600rpx" z-index="998">
		<view style="margin: 15rpx;">
			<u-form>
				<u-form-item label="数量">
					<u-input v-model="buyinfo.number"  border />
				</u-form-item>
				<u-form-item label="姓名">
					<u-input v-model="buyinfo.name"  border />
				</u-form-item>
				<u-form-item label="电话">
					<u-input v-model="buyinfo.phone"  border />
				</u-form-item>
				<u-form-item label="地址">
					<u-input v-model="buyinfo.address"  border />
				</u-form-item>
			</u-form>
	
			<button @click="confirmbuy">确定</button>
		</view>
	</u-popup>
</template>

<script setup>
	import { ref } from 'vue';
	import { dateFormat, ktluser, ktlapi, getVersion,OT } from '@/utils';  
	
	 const user = ktluser.getUser(false)
	 const StoreList = ref([]);
	 const myCoin = ref(0);
	 const canbuy = ref(false);
	 const buyinfo = ref({
		 "number":1,
		 "address":"",
		 "name":user.Name,
		 "phone":""
	 });
	 const ActiveItem = ref(null);
	function myorder(){
		uni.navigateTo({
			url: '/pages-ucenter/store/store-order'
		})
	}
	
	function confirmbuy(){ 
		if(ActiveItem.value.Number < buyinfo.value.number){
			uni.showToast({
				title:'库存不足',
				icon:'none'
			})
			return;
		}
		if(buyinfo.value.number < 1 
			|| buyinfo.value.address == '' 
			|| buyinfo.value.name == '' 
			|| buyinfo.value.phone == '' ){
			uni.showToast({
				title:'信息不全',
				icon:'none'
			})
			return;
		}
		 uni.showLoading({
		 	title: '加载中'
		 });
		 ktlapi({ 
		 	apiurl:OT.CommandSet,
		 	action: "Cus_StoreItems_By",
		 	data: {
		 		"AccountId": user.AccountID,
				"number":buyinfo.value.number,
				"address":buyinfo.value.address,
				"name":buyinfo.value.name,
				"phone":buyinfo.value.phone,
				"StoreItemId":ActiveItem.value.ID
		 	}
		 }).then(res => { 
		 	uni.hideLoading();
			ActiveItem.value.Number = ActiveItem.value.Number - buyinfo.value.number;
			myCoin.value = myCoin.value - (ActiveItem.value.UseCoin * buyinfo.value.number);
			canbuy.value = false;
			uni.showToast({
				title:'兑换成功',
				icon:'success'
			})
		 });
	}
	
	function change(e){ 
		console.log(StoreList.value[e.detail.index])
		var item = StoreList.value[e.detail.index];
		if(myCoin.value < item.UseCoin){
			uni.showToast({
				title:'货币不足',
				icon:'none'
			})
			return;
		}
		if(item["Number"] <= 0){
			uni.showToast({
				title:'库存不足',
				icon:'none'
			})
			return;
		}else{
			canbuy.value = true;
			ActiveItem.value = item;
		}
	}
	
	onMounted(() => {  
		uni.showLoading({
			title: '加载中'
		});
		ktlapi({ 
			apiurl:OT.CommandSet,
			action: "Cus_StoreItems_My",
			data: {
				"AccountId": user.AccountID
			}
		}).then(res => {
			StoreList.value = res.data.tables[0].table;
			myCoin.value = res.data.tables[1].table[0]["Coin"];
			uni.hideLoading();
		});
	})
</script>

<style lang="scss"> 
</style>